<template>
  <view class="tn-week-calendar">
    <!-- 顶部中文数据 -->
    <view class="tn-week-calendar__header">
      <view
        v-for="(item, index) in weekdayZh"
        :key="index"
        class="title"
      >{{ item }}</view>
    </view>

    <!-- 内容 -->
    <view class="tn-week-calendar__content">
      <swiper
        class="content__swiper"
        :indicator-dots="false"
        :autoplay="false"
        :circular="false"
        :duration="250"
        :vertical="false"
        :current="currentShowWeek"
        @change="handleSwiperChange"
      >
        <swiper-item
          v-for="(item, index) in calendarData"
          :key="index"
          class="content__swiper-item"
        >
          <!-- 日期数据 -->
          <view class="content__data">
            <view
              v-for="(dateItem, dateIndex) in item"
              :key="dateIndex"
              class="value"
              :class="dateValueClass(index, dateIndex)"
              :style="dateValueStyle(index, dateIndex)"
              @tap.stop="handleDateClick(dateItem.value)"
            >
              {{ dateItem.value }}
              <view v-if="dateItem.desc" class="desc tn-text-ellipsis-1">
                {{ dateItem.desc }}
              </view>
            </view>
          </view>
          
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { watch, computed, CSSProperties } from 'vue'
import { weekCalendarProps, weekCalendarEmits, WeekCalendarData } from '../../../types/tn-week-calendar'
import { ColorInfo } from '../../../types/tuniao-ui'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import useDateInfo from '../lib/useDateInfo'


const props = defineProps(weekCalendarProps)
const emits = defineEmits(weekCalendarEmits)

const { 
  weekdayZh,
  calendarData, 
  currentShowWeek,
  selectValue,
  init, 
  setDefaultValue,
  updateCurrentShowWeek,
  updateSelectValue
} = useDateInfo()

const { splitColorInfo } = useComponentColor()

// 解析字体颜色
const fontColor = computed<ColorInfo>(() => {
  return splitColorInfo('color', props?.color || '')
})
// 解析激活时字体颜色
const activeFontColor = computed<ColorInfo>(() => {
  return splitColorInfo('color', props?.activeColor || '')
})
// 解析激活时背景颜色
const activeBgColor = computed<ColorInfo>(() => {
  return splitColorInfo('bg', props?.activeBgColor || '')
})

// 日期的样式
const dateValueStyle = computed<(weekIndex: number, index: number) => CSSProperties>(() => {
  return (weekIndex: number, index: number) => {
    let style: CSSProperties = {}

    // 获取对应日期的数据
    const date = calendarData.value[weekIndex][index]
    if(date?.select) {
      if (activeFontColor.value.type === 'style') {
        style.color = activeFontColor.value.value
      }
      if (activeBgColor.value.type === 'style') {
        style.backgroundColor = activeBgColor.value.value
      }
    } else {
      if (fontColor.value.type === 'style') {
        style.color = fontColor.value.value
      }
    }

    return style
  }
})

// 日期对应的类
const dateValueClass = computed<(weekIndex: number, index: number) => string>(() => {
  return (weekIndex: number, index: number) => {
    let clazz: string[] = []

    // 获取对应日期的数据
    const date = calendarData.value[weekIndex][index]
    if (date?.disabled) {
      clazz.push('disabled')
    }
    if(date?.select) {
      clazz.push('select')
      if (activeFontColor.value.type === 'class') {
        clazz.push(activeFontColor.value.value)
      }
      if (activeBgColor.value.type === 'class') {
        clazz.push(activeBgColor.value.value)
      }
    } else {
      if (fontColor.value.type === 'class') {
        clazz.push(fontColor.value.value)
      }
    }

    return clazz.join(' ')
  }
})

// 标记是否为内部修改
let interUpdate: boolean = false

watch(() => props.modelValue, (val) => {
  if (interUpdate) {
    interUpdate = !interUpdate
    return
  }
  setDefaultValue(val)
})

// 初始化周日历
let initFlag: boolean = false
const initWeekCalendar = () => {
  init(
    props.modelValue,
    props.year,
    props.month,
    props.dateData as WeekCalendarData[]
  )
  // console.log(calendarData.value);
  initFlag = true
}
initWeekCalendar()

watch(selectValue, (val) => {
  if (initFlag) {
    interUpdate = true
    // console.log('selectValue', val);
    emits('update:modelValue', Number(val))
  }
}, {
  deep: true
})

// 处理周切换
const handleSwiperChange = (e: any) => {
  updateCurrentShowWeek(e.detail.current)
  emits('week-change', currentShowWeek.value + 1)
}

// 处理日期点击
const handleDateClick = (val: string | number) => {
  updateSelectValue(val)
}
</script>

<script lang="ts">
  export default {
    options: {
      // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
      virtualHost: true
    }
  }
  </script>

<style lang="scss" scoped>
@import '../../../theme.scss';
.tn-week-calendar {
  position: relative;
  width: 100%;
  overflow: hidden;

  &__header {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
    z-index: 1;
    padding: 6rpx 0rpx;

    .title {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &__content {
    position: relative;
    width: 100%;
    background-color: #FAFAFA;
    transition: height 0.25s ease;
    height: 100rpx;

    .content__swiper {
      height: 100%;
    }

    .content__data {
      position: relative;
      width: 100%;
      display: flex;
      flex-wrap: wrap;

      .value {
        width: calc(100% / 7 - 10rpx);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 90rpx;
        margin: 5rpx;

        &.disabled {
          color: #AAAAAA !important;
        }

        &.select {
          background-color: $tn-main-color;
          color: #FFFFFF;
          border-radius: 10rpx;
          .desc {
            color: inherit;
          }
          &.range {
            background-color: #E6E6E6;
            border-radius: 0rpx;
            color: $tn-main-color
          }
          &.range-start {
            border-radius: 10rpx 0rpx 0rpx 10rpx;
          }
          &.range-end {
            border-radius: 0rpx 10rpx 10rpx 0rpx;
          }
        }

        .desc {
          font-size: 18rpx;
          color: #AAAAAA;
        }
      }
    }
  }
}
</style>
